<template>
  <div class="index-container">
    <div class="map_wrap">
      <search></search>
      <MapContainer></MapContainer>
    </div>
    <div class="heartMap">
      <heartMap></heartMap>
    </div>
    <!-- title提示框组件 -->
    <div class="infoMap">
      <infoMap></infoMap>
    </div>
  </div>
</template>

<script>
import MapContainer from "@/components/Mapcontainer";
import search from "@/components/search";
import heartMap from "@/components/heartMap";
import infoMap from "@/components/infoMap";
export default {
  components: {
    MapContainer,
    search,
    heartMap,
    infoMap,
  },
};
</script>

<style lang="less" scoped>
.index-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  .map_wrap {
    width: 60%;
    height: 60%;
    position: absolute;
    left: 50%;
    margin-left: -30%;
    top: 20%;
  }
  .heartMap {
    position: relative;
    width: 50px;
    height: 50px;
    top: 20%;
    left: 50%;

    margin-left: -25px;
  }
}
</style>